<template>
	<view>
		<view class="recor" @click="startAudio()">
			<view class="container">
				<template v-if="chage">
					<span class='spans span4'></span>
					<span class='spans span5'></span>
					<span class='spans span6'></span>
					<span class='spans span7'></span>
				</template>
				<template v-else>
					<span class='span span0'></span>
					<span class='span span1'></span>
					<span class='span span2'></span>
					<span class='span span3'></span>
				</template>
			</view>
			<view class="time">
				{{time}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			URL:String
		},
		data() {
			return {
				time:0,
				chage:true,
				innerAudioContext:''
			}
		},
		mounted() {
			let innerAudioContext = uni.createInnerAudioContext()
			innerAudioContext.autoplay = false;
			innerAudioContext.src = this.URL;
			innerAudioContext.onCanplay(()=>{
				this.audioDuration(~~innerAudioContext.duration);
			})
			innerAudioContext.onPlay(()=>{
				this.audioDuration(~~innerAudioContext.duration);
			})
			innerAudioContext.onTimeUpdate(()=>{
				this.audioDuration(~~innerAudioContext.duration);
				const timeF = setTimeout(()=>{
					this.audioDuration(~~innerAudioContext.duration);
					clearTimeout(timeF);
				},10);
			})
			this.innerAudioContext = innerAudioContext
			innerAudioContext.onEnded(() => {
				this.chage = true
			});
		},
		methods: {
			//音频时长
			audioDuration(duration){
				if (this.time>0) return false;
				if(Number(duration) >= 60){
					let minute = 0
					let second = 0
					second = Number(duration)%60
					minute = (Number(duration) - second)/60
					this.time = minute + '’' + second
				}else{
					this.time = duration
				}
			},
			//开始音频文件
			startAudio(){
			    if(this.chage){
					this.chage = false
					this.innerAudioContext.play(() => {
						console.log('开始')
					});
					this.innerAudioContext.onError((res) => {});
				}else{
					this.chage = true
					this.innerAudioContext.pause(() => {
						console.log('暂停')
					});
					this.innerAudioContext.onError((res) => {});
				}
			},
		}
	}
</script>

<style lang="scss">
	.recor{
		width: 140rpx;
		height: 60rpx;
		border-radius: 8rpx;
		border: 1px solid #C4C4C4;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 20rpx;
		margin-right: 20rpx;
		.time{
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			
		}
	}
	.container {
		display: flex;
		align-items: center;
		position: relative;
		height: 40rpx;
	}

	.container {
		.spans{
			background-color:#64B6A8 ;
			width: 2px;
			height: 20%;
			border-radius: calc(40rpx * 0.2 * 0.5);
			margin-right: 4px;
		}
		.span4 {
			height: 40%;
		}
		.span5 {
			height: 80%;
		}
		.span6 {
			height: 60%;
		}
		.span7 {
			height: 20%;
		}
		.span{
			background-color:#64B6A8 ;
			width: 2px;
			height: 20%;
			border-radius: calc(40rpx * 0.2 * 0.5);
			margin-right: 4px;
			animation: loading 2.5s infinite linear;
		}
		.span0 {
			animation-delay: calc(0.2s * 0);
		}
		.span1 {
			animation-delay: calc(0.2s * 1);
		}
		.span2 {
			animation-delay: calc(0.2s * 2);
		}
		.span3 {
			animation-delay: calc(0.2s * 3);
		}
	}

	.container span:last-child {
		margin-right: 0px;
	}

	@keyframes loading {
		0% {
			height: 20%;
			border-radius: calc(40rpx * 0.2 * 0.5);
		}

		50% {
			height: 100%;
			border-radius: calc(40rpx * 1 * 0.5);
		}

		100% {
			height: 20%;
			border-radius: calc(40rpx * 0.2 * 0.5);
		}
	}
</style>